<template>
  <div class="appp">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <to-head :title="title" :time="time" />
        </div>
        <div class="bnr-con">
          <a-row>
            <a-col :span="14" style="height:100%">
              <div>
                <dv-border-box-11
                  class="border11"
                  title="异常呼叫信息"
                  :color="['#f1d90b', 'rgba(241, 217,11, 0.3)']"
                  backgroundColor="rgba(8, 18,67, 0.7)"
                >
                  <!-- <div class="tit">设备故障</div> -->
                  <left-1 ref="left1" :cx="cx" class="test"></left-1>
                </dv-border-box-11>
              </div>
            </a-col>
            <a-col :span="10" style="height:100%;padding-left:18px;">
              <div>
                <dv-border-box-11
                  class="border11"
                  title="今日已解决"
                  :color="['#0dde79', 'rgba(13, 222,121, 0.3)']"
                  backgroundColor="rgba(8, 18,67, 0.6)"
                >
                  <!-- <div class="tit">今日已维修</div> -->
                  <left-4 ref="left4" :cx="cx" class="test"></left-4>
                </dv-border-box-11>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" style="height:100%;">
              <div class="three">
                <dv-border-box-4
                  class="border12"
                  :color="['#6BB2FA', 'rgba(8, 18,67, 0.6)']"
                >
                  <div class="test">
                    <div class="tit">未点检任务</div>
                    <left-2 ref="left2" :cx="cx"></left-2>
                  </div>
                </dv-border-box-4>
              </div>
            </a-col>
            <a-col :span="12" style="height:100%">
              <!-- backgroundColor="rgba(8, 18,67, 0.6)" -->
              <div class="three">
                <dv-border-box-4
                  :reverse="true"
                  class="border12"
                  :color="['#6BB2FA', 'rgba(8, 18,67, 0.6)']"
                >
                  <div class="test">
                    <div class="tit">未保养任务</div>
                    <left-3 ref="left3" :cx="cx"></left-3>
                  </div>
                </dv-border-box-4>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ToHead from './components/ad/ToHead.vue'
import Left1 from './components/ad/Left1.vue'
import Left2 from './components/ad/Left2.vue'
import Left3 from './components/ad/Left3.vue'
import Left4 from './components/ad/Left4.vue'

export default {
  name: 'App',
  components: {
    ToHead,
    Left1,
    Left2,
    Left3,
    Left4,
  },
  data() {
    return {
      title: '制造一部安灯报警',
      cx: '',
      timeInterval: null,
    }
  },
  created() {
    this.cx = this.$route.query.cx
  },
  props: {
    time: {
      type: String,
      default: '',
    },
  },
  watch: {},

  mounted() {
    this.timeInterval = setInterval(() => {
      this.$nextTick(() => {
        this.$refs.left1.getData()
        this.$refs.left2.getData()
        this.$refs.left3.getData()
        this.$refs.Left4.getData()
      })
    }, window.config_time1)
    this.title = this.$route.query.title
    this.vw =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.appp {
  font-family: 'MicrosoftYaHei', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}
.bnr-con {
  height: 90vh;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 1vh;
  // cursor: pointer;
  // background-color: rgba(8, 18, 67, 0.7);
  // padding-left: 20px;
}
.warrper ::v-deep .dv-scroll-board .rows .ceil {
  color: #d3d3d5 !important;
}
.warrper .left ::v-deep .dv-scroll-board .header .header-item {
  color: #05f4f7 !important;
}
.warrper .right ::v-deep .dv-scroll-board .header .header-item {
  color: #05f4f7 !important;
}

.warrper ::v-deep .ant-select-selection {
  border: 1px solid #122794;
}
.warrper ::v-deep .ant-fullcalendar-header {
  padding: 5px 16px 5px 0;
}
.two {
  margin-bottom: 2vh;
  margin-right: 10ww;
  // background-color: rgba(8, 18, 67, 0.7);
}
.three {
  margin-top: 2vh;
}
.border11 {
  width: 100%;
  position: relative;
  height: 50vh;
  .test {
    width: 98%;
    position: absolute;
    top: 7vh;
    left: 1vw;
  }
}
.border12 {
  width: 100%;
  position: relative;
  height: 36vh;
  .test {
    width: 98%;
    position: absolute;
    top: 2vh;
    left: 1vw;
  }
}
.tit {
  .px2font(20);
  .px2vh(padding-top, 8);
  .px2vw(padding-left, 15);
  .px2vh(padding-bottom, 8);
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
  background: linear-gradient(
    to right,
    rgba(21, 60, 160, 0.05),
    rgba(29, 62, 208, 0.3) 50%,
    rgba(21, 60, 160, 0.05)
  );
}
.table {
  padding: 6rem 2rem 0rem 2rem;
}
</style>
